import React, { useState } from 'react';
import { Radio ,Row , Col , TimePicker, Card ,Select ,Table, Tag, Space} from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import moment from 'moment';

import './index.less'

const SeckillGoods = () => {
    const [selectDate,setSelectDate] = useState('Apple');
    // 选择器
    const { Option } = Select;
    // 选择区域
    const options = [
    { label: '全部', value: '全部' },
    { label: '今天', value: '今天' },
    { label: '昨天', value: '昨天' },
    { label: '最近7天', value: '最近7天' },
    { label: '最近30天', value: '最近30天' },
    { label: '本月', value: '本月' },
    { label: '本年', value: '本年' },
    ];

    // 表格数据逻辑
    const columns = [
        {
          title: 'ID',
          dataIndex: 'name',
          key: 'name',
          align:'center',
          render: text => <a>{text}</a>,
        },
        {
          title: '砍价图片',
          dataIndex: 'age',
          key: 'age',
          align:'center',
          width:'150px'
        },
        {
          title: '砍价商品名称',
          dataIndex: 'address',
          key: 'address',
          align:'center',
        },
        {
            title: '商品介绍',
            dataIndex: 'address',
            key: 'address',
            align:'center',
          },
          {
            title: '砍价价格',
            dataIndex: 'address',
            key: 'address',
            align:'center',
          },
          {
            title: '总共砍次数',
            dataIndex: 'address',
            key: 'address',
            align:'center',
          },
          {
            title: '剩余砍价次数',
            dataIndex: 'address',
            key: 'address',
            align:'center',
          },
          {
            title: '开始时间',
            dataIndex: 'address',
            key: 'address',
            align:'center',
          },
          {
            title: '结束时间',
            dataIndex: 'address',
            key: 'address',
            align:'center',
          },
        {
          title: '砍价状态',
          key: 'tags',
          dataIndex: 'tags',
          align:'center',
          render: tags => (
            <>
              {tags.map(tag => {
                let color = tag.length > 5 ? 'geekblue' : 'green';
                if (tag === 'loser') {
                  color = 'volcano';
                }
                return (
                  <Tag color={color} key={tag}>
                    {tag.toUpperCase()}
                  </Tag>
                );
              })}
            </>
          ),
        },
        {
          title: '操作',
          key: 'action',
          align:'center',
          render: (text, record) => (
            <Space size="middle">
              <a>Invite {record.name}</a>
              <a>Delete</a>
            </Space>
          ),
        },
      ];
      
      const data = [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park',
          tags: ['nice', 'developer'],
        },
        {
          key: '2',
          name: 'Jim Green',
          age: 42,
          address: 'London No. 1 Lake Park',
          tags: ['loser'],
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
          tags: ['cool', 'teacher'],
        },
      ];

    // 选择时间段
    const  selects = e => {
        console.log('radio3 checked', e.target.value);
        setSelectDate(e.target.value)
      };
    //   选择时间
      const timeDate = (time, timeString)  =>{
        console.log(time, timeString);
      };

    //   状态选择
    const handleChange = (value) => {
        console.log(`selected ${value}`);
      }
    

    return (
        <PageContainer>
            <div className="seckillGoods">
                <Card>
                    {/* 时间选择 */}
                    <Row className='date'>
                        <Col span="12" className="select_date">
                            <p>时间选择：</p>
                            <Radio.Group
                                options={options}
                                onChange={selects}
                                value={selectDate}
                                optionType="button"
                                size="middle"
                            />
                        </Col>
                        {/* 时间选择 */}
                        <Col span="8">
                            <TimePicker onChange={timeDate} defaultOpenValue={moment('00:00:00', 'HH:mm:ss')} />
                        </Col>
                    </Row>
                    {/* 砍价状态选择 */}
                    <Row className="select_switch">
                        <Col span="24" className="switch_cont">
                            <p>砍价状态:</p>
                            <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
                                <Option value="请选择">请选择</Option>
                                <Option value="进行中">进行中</Option>
                                <Option value="已结束">已结束</Option>
                            </Select>
                        </Col>
                    </Row>
                    {/* 表格 */}
                    <Row className="tables">
                        <Col span="24">
                            <Table columns={columns} dataSource={data} />
                        </Col>
                    </Row>
                </Card>
                
            </div>
        </PageContainer>
        
    )
}

export default SeckillGoods